<template>
  <view class="withdraw-container">
    <!-- 提现方式选择 -->
    <view class="card-container">
      <view class="withdraw-method">
        <text class="method-label">提现方式:</text>
        <view class="method-tabs">
          <view
            class="method-tab"
            :class="{ active: withdrawal_type === 2 }"
            @tap="selectMethod(2)"
          >
            支付宝
          </view>
          <view
            class="method-tab"
            :class="{ active: withdrawal_type === 1 }"
            @tap="selectMethod(1)"
          >
            银行卡
          </view>
        </view>
      </view>

      <!-- 提现信息 -->
      <view class="withdraw-info">
        <text class="info-label">提现信息:</text>
        <view class="bank-info">
          <image class="bank-icon" :src="compuLogo" />
          <text class="bank-name">{{
            withdrawal_type === 1
              ? bankList[setBankInfo.banks_types] + `(${setBankInfo.bank_card})`
              : `支付宝(${setBankInfo.alipay_account})`
          }}</text>
        </view>
      </view>

      <!-- 提现金额 -->
      <view class="withdraw-amount">
        <text class="amount-label">提现金额</text>
        <view class="amount-input-wrapper">
          <text class="currency-symbol">¥</text>
          <input
            class="amount-input"
            type="digit"
            v-model="amount"
            placeholder=""
          />
        </view>
        <view class="available-amount">
          <text>可提现金额 ¥{{ availableAmount }}</text>
          <text class="withdraw-all" @tap="withdrawAll">全部提现</text>
        </view>
      </view>
    </view>

    <!-- 提现按钮 -->
    <view class="submit-btn-wrapper">
      <button class="submit-btn" @tap="submitWithdrawal">申请提现</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getPayMoneySetting,
  getallBank,
  getBankLogo,
  withdrawalRecordAdd
} from "@/apiShop/paymoney.js";
import { showToast } from "@/utils/helper.js";

const compuLogo = computed(() => {
  return withdrawal_type.value === 1
    ? bankLogoList.value[bankList.value[setBankInfo.value.banks_types]]
    : "/static/switch_tabs/u61.svg";
});
// 提现金额
const amount = ref("");
// 可提现金额
const availableAmount = ref("");
// 提现方式：alipay 或 bank
const withdrawal_type = ref(2);

// 选择提现方式
const selectMethod = (method) => {
  withdrawal_type.value = method;
};

// 全部提现
const withdrawAll = () => {
  amount.value = availableAmount.value;
};

// 提交提现申请
const submitWithdrawal = async () => {
  if (!amount.value) {
    showToast("请输入提现金额");
    return;
  }

  if (parseFloat(amount.value) <= 0) {
    showToast("提现金额必须大于0");
    return;
  }

  if (parseFloat(amount.value) > parseFloat(availableAmount.value)) {
    showToast("提现金额不能超过可提现金额");
    return;
  }
  const payInfo = await withdrawalRecordAdd({
    withdrawal_type: withdrawal_type.value,
    request_amount: amount.value,
  });
  uni.redirectTo({
    url: `/pagesShop/paymoney/success?payInfo=${JSON.stringify(payInfo)}`,
  });
};

const bankList = ref({});
const getBankOption = async () => {
  const res = await getallBank();
  bankList.value = res;
};
const setBankInfo = ref({});
const getPayMoneySettingData = async () => {
  const res = await getPayMoneySetting();
  setBankInfo.value = res;
  console.log(setBankInfo.value);
};

const bankLogoList = ref({});
const getBankLogoList = async () => {
  const res = await getBankLogo();
  bankLogoList.value = res;
};

onLoad(async (option) => {
  if (option.money) {
    availableAmount.value = option.money;
  }
  await getBankOption();
  await getPayMoneySettingData();
  await getBankLogoList();
});
</script>

<style lang="scss" scoped>
.withdraw-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.card-container {
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 提现方式 */
.withdraw-method {
  padding: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.method-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.method-tabs {
  display: flex;
  flex: 1;
}

.method-tab {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  background-color: #f5f5f5;
}

.method-tab.active {
  background-color: #009fff;
  color: #fff;
}

.method-tab:first-child {
  border-top-left-radius: 4rpx;
  border-bottom-left-radius: 4rpx;
}

.method-tab:last-child {
  border-top-right-radius: 4rpx;
  border-bottom-right-radius: 4rpx;
}

/* 提现信息 */
.withdraw-info {
  padding: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.info-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.bank-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.bank-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.bank-name {
  font-size: 28rpx;
  color: #333;
}

/* 提现金额 */
.withdraw-amount {
  padding: 30rpx;
}

.amount-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.currency-symbol {
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.amount-input {
  flex: 1;
  height: 80rpx;
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
  border: none;
}

.available-amount {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.withdraw-all {
  color: #009fff;
}

/* 提现按钮 */
.submit-btn-wrapper {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #009fff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  border: none;
}
</style>
